<template>
  <div class="job">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <JobTop :scroll='scroll'  v-show="flg"/>
    <List :style="sty" :data="data" v-show="flg"></List>
    <Details :item="item" v-show="!flg"/>
    <!-- <router-view /> -->
  </div>
  
</template>

<script>
// @ is an alias to /src
import JobTop from '@/components/JobTop.vue'
import List from '@/components/JobList.vue'
import Details from '@/components/Details.vue'


export default {
  name: 'Job',
  components: {
    Details,JobTop,List
  },
  data(){
    return{
      scroll:0,
      sty:null,
      data:null,
      item:null,
      img:"",
    }
  },
  watch:{
    scroll:'scrollTop'
  },
  mounted(){
    window.addEventListener('scroll',this.scrollTop)
  },
  created(){
    this.data = this.$store.getters.data.position
    // console.log(this.$store.getters.data.position);
    
    // console.log(this.data);
  },
  methods:{
    scrollTop(){
      this.scroll = window.pageYOffset
      if(this.scroll>56){
        this.sty = {position:"fixed",top:"118px"}
      }else{
        this.sty = null
      }
    },
    ck(i){
    // 
      this.item = this.data[i]
      // this.$router.push('/details')
      this.$store.commit('judge')
      // console.log(i);
    },
  },
  computed:{
    flg(){
      return this.$store.getters.flg
    }
  }
  
}
</script>

<style scoped lang="scss">
  .job{
    // width: 1024px;
    width: 100vw;
    // overflow: hidden;
    // height: 50vh;
    // z-index: -99;
    // height: 1000px;
    // height: 600px;
    // .myul { 
    //   margin-top: 2px;
    //   width: 100%;
    //   height: 600px;
    //   overflow: auto;
    //   // z-index: -1;
    //   background: #F5F6F5;
    //   .list{
    //     // border: 1px solid red;
    //     // width: 100%;
    //     padding: 10px 20px;
    //     background: #fff;
    //     margin-bottom:10px;
    //     div {
    //       margin: 8px 0;
    //     }
    //     .top {
    //       width: 100%;
    //       display: flex;
    //       justify-content: space-between;
    //       span{
    //         color: #36C1BB;
    //         font-weight: bold;
    //       }
    //     }
    //     .label {
    //       display: flex;
    //       span {
    //         margin-right: 5px;
    //         padding: 1% 2% 1% 2%;
    //         background: #F5F6F5;
    //         border-radius: 3px;
    //         font-size: 12px;
    //         color: #696968;
    //       }
    //     }
    //     .scale {
    //       span {
    //         margin-right: 10px;
    //         font-size: 14px;
    //       }
    //     }
    //     .text {
    //       margin-bottom: 0;
    //       display: flex;
    //       justify-content: space-between;
    //       align-items: center;
    //       // text-align: center;
    //       position: relative;
    //       span{
    //         color: #C2C2C1;
    //         font-size: 12px;
    //       }
    //       div {
    //         display: flex;
    //         align-items: center;
    //         .txt{
    //           // position: relative;
    //           // font-weight: bold;
    //           font-size: 14px;
    //           color: #000;
    //           margin-left: 10px;
    //         }
    //         .img {
    //           display: inline-block;
    //           width: 28px;
    //           height: 28px;
    //           border-radius: 50%;
    //           // background: red;
    //           background-size: 100%;
    //           // position: absolute;
    //           // top:-4px;
    //           // left: -3px;
    //         }
    //       }
    //     }
    //   }
    // }
  }
</style>
